<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>苏州狮子林</title>
  <style>

    a{
      text-decoration: none;
    }

    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }
    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .image-container {
      width: 30%;
      position: relative;
    }
    .info-container {
      width: 70%;
      position: absolute;
      margin-left: 380px;
    }
    .price {
      background-color: #ff7f00;
      color: white;
      padding: 10px;
      text-align: center;
      border-radius: 10px;
    }
    .price span {
      font-size: 36px;
      vertical-align: middle;
    }
    .price small {
      font-size: 14px;
    }

    img{
      width:360px;
      height:340px;
    }

  </style>


</head>
<body>
<p><Strong>您所在的位置:&emsp;</strong><a href="#">同程首页></a>  景区门票> 苏州景区门票> 苏州狮子林门票及相关产品</p>
<input type="hidden" id="scenic-name-input" value="${param.scenic_name}">
<div class="container">
  <div class="image-container">
  </div>
  <div class="info-container">
    <h1><span id="scenic_name"> </span> <span style="color: orange;">AAAA景区</span></h1>
    <p>以假山闻名的苏州名园</p>
    <p><strong>景点地址：</strong><span id="address"></span></p>
    <div class="price">
      <span id="price"></span>
      <small><a href="#">&emsp;<strong>去购票</strong></a></small>
    </div>
    <p><strong>精彩点评：</strong>狮子林的迷宫路段还是蛮好玩的，不过要注意安全喔，......<a href="#">更多</a></p>
    <p>1208条用户点评&emsp;<a href="#">我要点评</a></p>
  </div>
</div>
</body>
</html>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript">
  var scenic_name = document.getElementById('scenic-name-input').value;
  $.ajax({
    url: "/queryName",
    method: "POST",
    data: { scenic_name: scenic_name },
    dataType: "json",
    success: function(data) {
      if (data && data.length > 0){

        //从data数组中取出第一个元素
        var scenic = data[0];
        $("#scenic_name").text(scenic.scenic_name);
        $("#address").text(scenic.scenic_address);
        $("#price").text("¥" + scenic.price + "起");
        let imgUrl = "<img src='/img/"+scenic.img+"' alt='Image 1' title='"+scenic.scenic_name+"'>";
        $('.image-container').html(imgUrl);

      }else{
        console.error("No scenic data found");
      }
    },
    error: function(xhr, status, error) {
      console.error("Error fetching scenic details:", error);
    }
  });

</script>